<template>
	<view class="step" :class="page">
		<template v-if="type == 1">
			<view class="step-op1"></view>
			<view class="step-op2"></view>
			<view class="step-item">
				<image src="@/static/image/home/icon_1GroupBuy.png" mode="widthFix"></image>
				<view>{{$t("home.step1")}}</view>
			</view>
			<view class="step-item">
				<image src="@/static/image/home/icon_WinnerDrawn.png" mode="widthFix"></image>
				<view>{{$t("home.step2")}}</view>
			</view>
			<view class="step-item">
				<image src="@/static/image/home/icon_FreeShipping.png" mode="widthFix"></image>
				<view>{{$t("home.step3")}}</view>
			</view>
		</template>
		<template v-else-if="type == 3">
			<view class="step-op3"></view>
			<view class="step-op4"></view>
			<view class="step-item">
				<view class="step-item-num">
					1
				</view>
				<view class="step-item-fcolor">{{$t("finance.step1")}}</view>
			</view>
			<view class="step-item u-m-l-30">
				<view class="step-item-num">
					2
				</view>
				<view class="step-item-fcolor">{{$t("finance.step2")}}</view>
			</view>
			<view class="step-item">
				<view class="step-item-num">
					3
				</view>
				<view class="step-item-fcolor">{{$t("finance.step3")}}</view>
			</view>
		</template>
		<template v-else-if="type == 4">
			<view class="flexstep">
				<view class="flexstep-item">
					<view class="flexstep-item-box">
						<view class="flexstep-item-num">
							1
						</view>
						<view class="flexstep-item-fcolor">
							{{$t("finance.step1")}}
						</view>
					</view>
					<view class="flexstep-item-box">
						<view class="flexstep-item-num">
							2
						</view>
						<view class="flexstep-item-fcolor">
							{{$t("finance.step2")}}
						</view>
					</view>
					<view class="flexstep-item-box">
						<view class="flexstep-item-num">
							3
						</view>
						<view class="flexstep-item-fcolor">
							{{$t("finance.step3")}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="step-op1"></view>
			<view class="step-op2"></view>
			<view class="step-item">
				<image src="@/static/image/invite/icon_Sharelink.png" mode="widthFix"></image>
				<view>{{$t('invite.slink')}}</view>
			</view>
			<view class="step-item">
				<image src="@/static/image/invite/icon_Registion.png" mode="widthFix"></image>
				<view>{{$t("invite.reg")}}</view>
			</view>
			<view class="step-item">
				<image src="@/static/image/invite/icon_Earnrewards.png" mode="widthFix"></image>
				<view>{{$t("invite.rew")}}</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			// 涞源 
			page: {
				type: String,
				default: 'homePage'
			},
			type: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.step {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
	
		.step-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-family: Roboto, Roboto-Regular;
			font-weight: 400;
			color: #566c82;
			
			image {
				width: 80rpx;
				margin-bottom: 14rpx;
				border-radius: 50%;
			}
			.step-item-num {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #fe8a6d;
				border-radius: 50%;
				font-size: 48rpx;
				font-weight: 500;
				text-align: CENTER;
				color: #ffffff;
				letter-spacing: 0rpx;
				margin-bottom: 14rpx;
			}
			.step-item-fcolor {
				color: #fff;
			}
		}
	
		.step-op1,
		.step-op2 {
			position: absolute;
			width: 116rpx;
			height: 4rpx;
			border-top: 1rpx dashed #de6436;
			opacity: 0.3;
		}
		
		.step-op3,
		.step-op4 {
			position: absolute;
			width: 116rpx;
			height: 4rpx;
			border-top: 1rpx dashed #fff;
			opacity: 0.3;
		}
		
	}
	.homePage {
		.step-op1 {
			top: 40rpx;
			left: 174rpx;
		}
			
		.step-op2 {
			top: 40rpx;
			left: 450rpx;
		}
	}
	.goodsPage {
		.step-op1 {
			top: 40rpx;
			left: 174rpx;
		}
			
		.step-op2 {
			top: 40rpx;
			left: 406rpx;
		}
	}
	.invitePage {
		.step-op1 {
			top: 80rpx;
			left: 164rpx;
		}
			
		.step-op2 {
			top: 80rpx;
			left: 406rpx;
		}
	}
	.flist {
		.step-op3 {
			top: 90rpx;
			left: 120rpx;
		}
			
		.step-op4 {
			top: 90rpx;
			left: 356rpx;
		}
	}
	.flexstep {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.flexstep-item {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			
			.flexstep-item-box {
				flex: 1;
				display: flex;
				align-items: center;
				align-content: flex-start;
				flex-direction: column;
				position: relative;
				
			}
			.flexstep-item-box:nth-child(2) {
				&::before {
				content: '';
				width: 100rpx;
				border-top: 1rpx dashed #fff;
				opacity: 0.3;
				position: absolute;
				top: 40rpx;
				left: -50rpx;
				}
				&::after {
				content: '';
				width: 100rpx;
				border-top: 1rpx dashed #fff;
				opacity: 0.3;
				position: absolute;
				top: 40rpx;
				left: 170rpx;
				}
			}
			
			.flexstep-item-num {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #fe8a6d;
				border-radius: 50%;
				font-size: 48rpx;
				font-weight: 500;
				text-align: CENTER;
				color: #ffffff;
				letter-spacing: 0rpx;
				margin-bottom: 14rpx;
			}
			.flexstep-item-fcolor {
				color: #fff;
				text-align: center;
			}
		}
		
	}
</style>
